<!DOCTYPE html>
<html lang="en" class="[--scroll-mt:9.875rem] lg:[--scroll-mt:6.3125rem]">
  {{template "common/head" .}}
  <body class="antialiased text-slate-500 dark:text-slate-400 bg-white dark:bg-slate-900">
    <div class="space-y-10">
      <header class="relative">
        <div class="px-4 sm:px-6 md:px-10 lg:px-12 pb-10">
          <div class="absolute inset-0 bg-bottom bg-no-repeat bg-slate-50 dark:bg-[#0B1120]">
            <div class="absolute inset-0 bg-grid-slate-900/[0.04] bg-[bottom_1px_center] dark:bg-grid-slate-400/[0.05] dark:bg-bottom dark:border-b dark:border-slate-100/5" style="mask-image:linear-gradient(to bottom, transparent, black);-webkit-mask-image:linear-gradient(to bottom, transparent, black)"></div>
          </div>
          <div class="relative pt-4 flex items-center justify-between text-slate-700 font-semibold text-sm leading-6 dark:text-slate-200">
            <!-- Logo -->
            <a href="/">
              <picture>
                <source srcset="/img/asouldocs-dark.png" media="(prefers-color-scheme: dark)">
                <img src="/img/asouldocs-light.png" style="height: 28px">
              </picture>
            </a>
            <div class="flex items-center">
              <!-- <button type="button" class="text-slate-500 hover:text-slate-600 mr-4 w-8 h-8 -my-1 flex items-center justify-center md:hidden dark:hover:text-slate-300">
                <span class="sr-only">Search</span>
                <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m19 19-3.5-3.5"></path><circle cx="11" cy="11" r="6"></circle></svg>
              </button> -->
              <div class="flex items-center">
                <nav>
                  {{template "common/navbar" .}}
                </nav>
              </div>
            </div>
          </div>
          <div class="relative max-w-5xl mx-auto pt-20 sm:pt-24 lg:pt-32">
            <h1 class="text-slate-900 font-extrabold italic text-4xl sm:text-5xl lg:text-6xl tracking-tight text-center dark:text-white">
              {{call .Tr "home::title"}}
            </h1>
            <p class="mt-6 text-lg lg:text-xl text-slate-600 text-center max-w-3xl mx-auto dark:text-slate-400">
              {{call .Tr "home::tag_line"}}
            </p>
            <div class="mt-6 sm:mt-10 flex justify-center space-x-6 text-sm">
              <a class="bg-slate-900 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 text-white font-semibold h-12 px-6 rounded-lg w-full flex items-center justify-center sm:w-auto dark:bg-sky-500 dark:highlight-white/20 dark:hover:bg-sky-400" href="{{.Page.DocsBasePath}}">
                {{call .Tr "home::get_started"}}
              </a>
              <!-- <button type="button" class="hidden sm:flex items-center w-72 text-left space-x-3 px-4 h-12 bg-white ring-1 ring-slate-900/10 hover:ring-slate-300 focus:outline-none focus:ring-2 focus:ring-sky-500 shadow-sm rounded-lg text-slate-400 dark:bg-slate-800 dark:ring-0 dark:text-slate-300 dark:highlight-white/5 dark:hover:bg-slate-700">
                <svg
                  width="24"
                  height="24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="flex-none text-slate-300 dark:text-slate-400"
                  aria-hidden="true"
                >
                  <path d="m19 19-3.5-3.5"></path>
                  <circle cx="11" cy="11" r="6"></circle>
                </svg>
                <span class="flex-auto">Quick search...</span>
                <kbd class="font-sans font-semibold dark:text-slate-500">
                  <abbr title="Command" class="no-underline text-slate-300 dark:text-slate-500">⌘</abbr>
                  K
                </kbd>
              </button> -->
            </div>
          </div>
        </div>
      </header>
      <section class="text-center px-8 max-w-7xl mx-auto">
        <!-- lg:grid-cols-3 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 pb-8 border-b border-slate-200 dark:border-slate-700">
          <div class="p-2">
            <h2 class="font-semibold text-lg sm:text-xl md:text-2xl text-slate-900 dark:text-slate-100">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mb-1 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
              </svg>
              {{call .Tr "home::multilingual"}}
            </h2>
            <p class="text-lg">
              {{call .Tr "home::multilingual_desc"}}
            </p>
          </div>
          <div class="p-2">
            <h2 class="font-semibold text-lg sm:text-xl md:text-2xl text-slate-900 dark:text-slate-100">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mb-1 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
              {{call .Tr "home::real_time_sync"}}
            </h2>
            <p class="text-lg">
              {{call .Tr "home::real_time_sync_desc"}}
            </p>
          </div>
          <!-- <div class="p-2">
            <h2 class="font-semibold text-lg sm:text-xl md:text-2xl text-slate-900 dark:text-slate-100">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mb-1 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M10 21h7a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v11m0 5l4.879-4.879m0 0a3 3 0 104.243-4.242 3 3 0 00-4.243 4.242z" />
              </svg>
              {{call .Tr "home::searchable"}}
            </h2>
            <p class="text-lg">
              {{call .Tr "home::searchable_desc"}}
            </p>
          </div> -->
          <!-- <div class="p-2">
            <h2 class="font-semibold text-lg sm:text-xl md:text-2xl text-slate-900 dark:text-slate-100">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mb-1 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
              {{call .Tr "home::markdown"}}
            </h2>
            <p class="text-lg">
              {{call .Tr "home::markdown_desc"}}
            </p>
          </div> -->
          <div class="p-2">
            <h2 class="font-semibold text-lg sm:text-xl md:text-2xl text-slate-900 dark:text-slate-100">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mb-1 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
              {{call .Tr "home::customizable"}}
            </h2>
            <p class="text-lg">
              {{call .Tr "home::customizable_desc"}}
            </p>
          </div>
          <div class="p-2">
            <h2 class="font-semibold text-lg sm:text-xl md:text-2xl text-slate-900 dark:text-slate-100">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mb-1 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
              </svg>
              {{call .Tr "home::comment"}}
            </h2>
            <p class="text-lg">
              {{call .Tr "home::comment_desc"}}
            </p>
          </div>
        </div>
      </section>

      <footer class="pb-5 text-sm leading-6">
        <div class="max-w-7xl mx-auto divide-y divide-slate-200 px-4 sm:px-6 md:px-8 dark:divide-slate-700">
          <div class="grid grid-cols-1 md:grid-cols-3">
            <div class="lg:flex-none lg:w-1/2 px-10 pb-5">
              <h2 class="font-semibold text-slate-900 dark:text-slate-100">{{call .Tr "footer::getting_started"}}</h2>
              <ul class="mt-3 space-y-2">
                <li>
                  <a class="hover:text-slate-900 dark:hover:text-slate-300" href="{{.Page.DocsBasePath}}/introduction/installation">{{call .Tr "footer::installation"}}</a>
                </li>
                <li>
                  <a class="hover:text-slate-900 dark:hover:text-slate-300" href="{{.Page.DocsBasePath}}/howto/set-up-documentation">{{call .Tr "footer::documentation"}}</a>
                </li>
                <li>
                  <a class="hover:text-slate-900 dark:hover:text-slate-300" href="{{.Page.DocsBasePath}}/howto/use-extensions">{{call .Tr "footer::extensions"}}</a>
                </li>
              </ul>
            </div>
            <div class="lg:flex-none lg:w-1/2 px-10 pb-5">
              <h2 class="font-semibold text-slate-900 dark:text-slate-100">{{call .Tr "footer::powered_by"}}</h2>
              <ul class="mt-3 space-y-2">
                <li>
                  <a class="hover:text-slate-900 dark:hover:text-slate-300" href="https://asouldocs.dev/">ASoulDocs</a>
                </li>
                <li>
                  <a class="hover:text-slate-900 dark:hover:text-slate-300" href="{{if eq .Lang "zh-CN"}}https://flamego.cn{{else}}https://flamego.dev{{end}}">Flamego</a>
                </li>
                <li>
                  <a class="hover:text-slate-900 dark:hover:text-slate-300" href="https://tailwindcss.com/">Tailwind CSS</a>
                </li>
                <li>
                  <a class="hover:text-slate-900 dark:hover:text-slate-300" href="https://heroicons.com/">Heroicons</a>
                </li>
              </ul>
            </div>
            <div class="lg:flex-none lg:w-1/2 px-10 pb-5">
              <h2 class="font-semibold text-slate-900 dark:text-slate-100">{{call .Tr "footer::languages"}}</h2>
              <ul class="mt-3 space-y-2">
                {{range .Languages}}
                  <li>
                    <a class="hover:text-slate-900 dark:hover:text-slate-300" href="{{$.URL}}?lang={{.Name}}">{{.Description}}</a>
                  </li>
                {{end}}
              </ul>
            </div>
          </div>
          <div class="mt-10 pt-5 text-center">
            © {{Year}} {{call .Tr "footer::copyright"}}
          </div>
        </div>
      </footer>
    </div>
  </body>
</html>
